home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Codigos_Prontos / CSS / Outros / Exemplo de CSS-driven tabs.txt < prev    next >
Encoding:
Text File  |  2008-08-19  |  1.9 KB  |  107 lines
  1.  
  2.  
  3. The HTML:
  4.  
  5.     <ul id="globalnav">
  6.       <li><a href="#">Home</a></li>
  7.       <li><a href="#" class="here">About</a>
  8.         <ul>
  9.           <li><a href="#">Vision</a></li>
  10.           <li><a href="#">Team</a></li>
  11.           <li><a href="#">Culture</a></li>
  12.           <li><a href="#">Careers</a></li>
  13.           <li><a href="#" class="here">History</a></li>
  14.           <li><a href="#">Sponsorship</a></li>
  15.         </ul>
  16.       </li>
  17.       <li><a href="#">News</a></li>
  18.       <li><a href="#">Proof</a></li>
  19.       <li><a href="#">Process</a></li>
  20.       <li><a href="#">Expertise</a></li>
  21.       <li><a href="#">Help</a></li>
  22.     </ul>
  23.  
  24. The CSS:
  25.  
  26. /*globalnav*/
  27.  
  28.     #globalnav {
  29.         position:relative;
  30.         float:left;
  31.         width:100%;
  32.         padding:0 0 1.75em 1em;
  33.         margin:0;
  34.         list-style:none;
  35.         line-height:1em;
  36.     }
  37.  
  38.     #globalnav LI {
  39.         float:left;
  40.         margin:0;
  41.         padding:0;
  42.     }
  43.  
  44.     #globalnav A {
  45.         display:block;
  46.         color:#444;
  47.         text-decoration:none;
  48.         font-weight:bold;
  49.         background:#ddd;
  50.         margin:0;
  51.         padding:0.25em 1em;
  52.         border-left:1px solid #fff;
  53.         border-top:1px solid #fff;
  54.         border-right:1px solid #aaa;
  55.     }    
  56.  
  57.     #globalnav A:hover,
  58.     #globalnav A:active,
  59.     #globalnav A.here:link,
  60.     #globalnav A.here:visited {
  61.         background:#bbb;
  62.     }
  63.  
  64.     #globalnav A.here:link,
  65.     #globalnav A.here:visited {
  66.         position:relative;
  67.         z-index:102;
  68.     }
  69.  
  70. /*subnav*/
  71.  
  72.     #globalnav UL {
  73.         position:absolute;
  74.         left:0;
  75.         top:1.5em;
  76.         float:left;
  77.         background:#bbb;
  78.         width:100%;
  79.         margin:0;
  80.         padding:0.25em 0.25em 0.25em 1em;
  81.         list-style:none;
  82.         border-top:1px solid #fff;
  83.     }
  84.  
  85.     #globalnav UL LI {
  86.         float:left;
  87.         display:block;
  88.         margin-top:1px;
  89.     }
  90.  
  91.     #globalnav UL A {
  92.         background:#bbb;
  93.         color:#fff;
  94.         display:inline;
  95.         margin:0;
  96.         padding:0 1em;
  97.         border:0
  98.     }
  99.  
  100.     #globalnav UL A:hover,
  101.     #globalnav UL A:active,
  102.     #globalnav UL A.here:link,
  103.     #globalnav UL A.here:visited {
  104.         color:#444;
  105.     }
  106.  
  107.